<template>
    <!-- 侧边栏开始 -->
    <aside class="aside w12p" :class="{ 'w5p': store.state }">
        <div class="top-border flex aic jc-c mb-20 rel">
            <img v-if="!store.state" src="../../assets/img/logo.png" style="width: 100%;height: 100%;" alt="">
            <img v-else src="../../assets/img/logo2.jpg" class="imggg" alt="">
        </div>
        <router-link class="item flex aic pl-20 mb-10 " to='/contacts'>
            <i class="iconfont icon-31haoyou mr-15"></i>
            <span class="f16 fwig" :class="{ 'sidebar': store.state }">Contacts</span>
        </router-link>
        <router-link class="item flex aic pl-20 mb-10 " active-class="active" to='/message'>
            <i class="iconfont icon-message_light mr-15"></i>
            <span class="f16 fwig" :class="{ 'sidebar': store.state }">Message</span>
        </router-link>
        <router-link class="item flex aic pl-20 mb-10" active-class="active" to='/rfq'>
            <i class="iconfont icon-RFQ mr-15"></i>
            <span class="f16 fwig" :class="{ 'sidebar': store.state }">RFQ</span>
        </router-link>
        <router-link class="item flex aic pl-20 mb-10" active-class="active" to='/qtn'>
            <i class="iconfont icon-tubiao-baojia mr-15"></i>
            <span class="f16 fwig" :class="{ 'sidebar': store.state }">QTN</span>
        </router-link>
        <router-link class="item flex aic pl-20 mb-10" active-class="active" to='/order'>
            <i class="iconfont icon-dingdan mr-15"></i>
            <span class="f16 fwig" :class="{ 'sidebar': store.state }">Order</span>
        </router-link>
        <router-link class="item flex aic pl-20 mb-10" active-class="active" to='/payment'>
            <i class="iconfont icon-pay3zhifu mr-15"></i>
            <span class="f16 fwig" :class="{ 'sidebar': store.state }">Payment</span>
        </router-link>
        <router-link class="item flex aic pl-20 mb-10" active-class="active" to='/shipment'>
            <i class="iconfont icon-yunshu mr-15"></i>
            <span class="f16 fwig" :class="{ 'sidebar': store.state }">Shipment</span>
        </router-link>
        <router-link class="item flex aic pl-20 mb-10" active-class="active" to='/product'>
            <i class="iconfont icon-chanpin mr-15"></i>
            <span class="f16 fwig" :class="{ 'sidebar': store.state }">Product</span>
        </router-link>
        <router-link class="item flex aic pl-20 mb-10" active-class="active" to='/website'>
            <i class="iconfont icon-zhanqunguanlixitong mr-15"></i>
            <span class="f16 fwig" :class="{ 'sidebar': store.state }">Website</span>
        </router-link>
        <router-link class="item flex aic pl-20 mb-10" active-class="active" to='/files'>
            <i class="iconfont icon-wj-wjj mr-15"></i>
            <span class="f16 fwig" :class="{ 'sidebar': store.state }">Files</span>
        </router-link>
        <router-link class="item flex aic pl-20 mb-10" active-class="active" to='/email'>
            <i class="iconfont icon-Email mr-15"></i>
            <span class="f16 fwig" :class="{ 'sidebar': store.state }">Email</span>
        </router-link>
        <router-link class="item flex aic pl-20 mb-10" active-class="active" to='/addons'>
            <i class="iconfont icon-xitongmoxingchajian mr-10"></i>
            <span class="f16 fwig" :class="{ 'sidebar': store.state }">Addons</span>
        </router-link>
    </aside>
</template>

<script setup>
import { ref } from 'vue'
import { useDemoStore } from '../../pinia/index'
import { useRouter } from 'vue-router'
import { prop } from 'dom7';
const store = useDemoStore()
const router = useRouter()
const goto = (newrouter) => {
    router.push({ path: newrouter })
}



</script>

<style lang="less" scoped>
.active {
    background-color: #f5f7f9;
    border-radius: 4px;
}

.w12p {
    flex-shrink: 0;
    width: 12.5%;
    transition: all 0.4s ease;
}

.w5p {
    width: 5%;
    transition: all 0.4s ease;
}

/* 侧边栏开始 */
.aside {
    flex-shrink: 0;
    height: 100vh;
    // border-right: 2px solid #a3a3a3;
    padding: 5px 10px 10px 10px;
    // background: linear-gradient(to bottom, #23CCEF 0%, rgba(64, 145, 255, 0.7) 100%);
    background-color: #ffffff;
    .imggg {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

    .top-border {
        width: 100%;
        height: 80px;
        border-radius: 10px;

        .icon-triangle-bottom {
            color: #d8d8d3a9;
            right: 10px;
        }
    }

    .item {
        width: 100%;
        height: 40px;
        color: #585858;
    }

    .item:hover {
        background-color: #f5f7f9;
        border-radius: 4px;
    }

    .fwig {
        font-weight: bold;
    }

    .sidebar {
        display: none;
    }

    .iconfont {
        font-size: 28px;
        font-weight: 300;
    }
}
</style>